import React, { useState } from "react";
import { useEffect } from "react";

export default function Useeffect() {
	let [count, setCount] = useState(1);

	//add自增
	let add = () => {
		setCount(++count);
	};

	//模拟生命周期  相当于 componentDidMount 和 compoentDidUpdate
	useEffect(() => {
		console.log("学习useEffect!");
	});

	// 可以调用多次
	useEffect(() => {
		console.log("我有第二次执行了~~~");
	});

	//  模拟生命周期  只模拟 componentDidMount
	useEffect(() => {
		console.log(" 只模拟 componentDidMount");
	}, [count]); //  []  设置哪些状态改变后,再次执行回调

	useEffect(() => {
		console.log(" 只模拟 componentDidMount");
	}, []); //  []  设置哪些状态改变后,再次执行回调

	//模拟生命周期  单独模拟 componetWillUnmount
	useEffect(() => {
		return () => {
			console.log("组件将要卸载了~~~");
		};
	}, []);

	return (
		<>
			<h1>学习 [函数式]组件中的 ---useEffect() --- hook</h1>
			<h2>{count}</h2>
			<button onClick={add}>点击切换</button>
		</>
	);
}
